<template>
	<div class="asset-print">
		<!-- <div class="qrtitle">{{ title }}</div> -->
		<!-- <div class="qrcode" id="qrCode"></div> -->
		<div>
		<div class="content">
		<vue-qr class="v_qrcode" v-if="printType == 'asset'" style="width: 160px;height: 160px;;"
			:text="QRCodeUrl"   
			:size="300"
			:margin="20"
			colorDark="#333"
			backgroundColor="#fff"
			:logoSrc="lgoImgz"
			:logoScale="logoScale"
			
			dotScale="1"
			logoCornerRadius="0"
			
			:callback="getCode"
		></vue-qr>
		<vue-qr class="v_qrcode" v-if="printType == 'running'" style="width: 160px;height: 160px;;"
			:text="QRCodeUrl"   
			:size="300"
			:margin="20"
			colorDark="#333"
			backgroundColor="#fff"
			:logoSrc="lgoImgy"
			:logoScale="logoScale"
			
			dotScale="1"
			logoCornerRadius="0"
			
			:callback="getCode"
		></vue-qr>
	</div>
		</div>
		<div class="qrInfo">
			<template v-if="printType == 'asset'">
				<div>项目名称：{{ asset.proName }}</div>
				<div>项目负责人：{{ asset.proLeaderName }}</div>
				<div>序列号：{{ asset.assetSerialNum }}</div>
				<div>资产类型：{{ asset.assetTypeName }}</div>
				<div>收货日期：{{ dateFormat(asset.createTime, 'yyyy.MM.dd') }}</div>
			</template>
			<template v-if="printType == 'running'">
				<div>业务名称：{{ asset.proName }}</div>
				<div>负责人：{{ userName }}</div>
				<!-- <div>负责人：{{ asset.proLeaderName }}</div> -->
				<div>主机名：{{ asset.hostName }}</div>
				<div>主机中文名：{{ asset.hostNameCn }}</div>
				<div>上架日期：{{ dateFormat(asset.createTime, 'yyyy.MM.dd') }}</div>
			</template>
		</div>
	</div>
</template>

<script>
	import { dateFormat } from '@/utils/public';
	// import QRCode from 'qrcodejs2'
	import QRCode from 'qrcode';
	import VueQr from 'vue-qr'
	export default {
		name:'QR',
  		components:{VueQr},
		props: {
			asset: {
				type: Object,
				default: () => {
					return {};
				},
			},
			printType: {
				// asset:资产属性标签，running：运行属性标签
				type: String,
				default: '',
			},
			userName: {
				type: String,
				default: '',
			},
			logoUrl:{
			default:'../skin/favicon.png',
			type:String,
			// required:true
			}
		},
		data() {
			return {
				title: '',
				QRCodeUrl: '',
				logoScale:50,
				// codeText: 'https://blog.csdn.net/yuansusu_?spm=1000.2115.3001.53',
				lgoImgz: require('/public/skin/icon_z.png'),
				lgoImgy: require('/public/skin/icon_y.png'),
				imgurl:''
			};
		},
		watch: {
			asset: {
				immediate: true,
				deep: true,
				handler: function(newValue, oldValue) {
					if (newValue) {
						// text = `NJYB@SXDL:${newValue.id}`
						this.initQR(`NJYB@SXDL:${newValue.assetId}`);
					}
				},
			},
		},
		mounted() {
			
		},
		methods: {
			dateFormat,
			getCode(imgurl){
				// console.log("二维码",imgurl);
			},
			initQR(text) {
				if (this.printType == 'asset') {
					this.title = '资产属性标签';
				}
				if (this.printType == 'running') {
					this.title = '运行属性标签';
				}
				this.QRCodeUrl = text;
				//toDataURL()方法用于将生成的二维码转换成数据URL
				// QRCode.toDataURL(text)
				// 	.then(url => {
				// 		console.log(url);
				// 		this.QRCodeUrl = url;
				// 	})
				// 	.catch(err => {
				// 		console.error(err);
				// 	});
				},
		},
	};
</script>

<style lang="scss" scoped>
	.asset-print {
		// margin-top: 13px;
		// margin-bottom: 92px;
		width: 198px;
		height: 266px;
		// border: 0.5px #000000 solid;
		// margin-bottom: 20px;
		// display: flex;
		// flex-direction: column;

		.content {
			display: flex;
			// height: 50px;
			// width: 180px;
			justify-content: center;
			align-items: center;
			// padding-right: 12px;
			// border: 0.5px #ced124 solid;
		}
		.v_qrcode {
			margin-right: 12px;
			// border: 0.5px #ced124 solid;
		}
		.qrInfo {
			width: 90%;
			height: 106px;
			display: grid;
			/* 设置三列列宽 宽度都为100px */
			// grid-template-columns: auto;
			// /* 设置三行行高 高度都为100px */
			// grid-template-rows: 10px 10px 10px 10px 10px 10px;
			// column-gap: 1px;
			grid-template-columns: repeat(auto-fill, minmax(150px, 2fr));
  			grid-gap: 1px;

			font-size: 9px;
			text-align: left;
			padding-left: 10px;
			margin: 0;
			padding-bottom: 15px;
			// text-indent: 2em;
			// text-decoration: underline;
			// letter-spacing: 0.5px;
			// margin-left: 9px;
			// font-size: 9px;
			// border: 0.5px #24c79e solid;
		}
	}
</style>
